<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 面包屑 -->
     <div v-if="$route.query.id">
        <el-breadcrumb separator-class="el-icon-arrow-right" >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
       <hr />
     </div>
      <!-- form表单 新增目录按钮在里面 -->
      <el-form :inline="true" :model="formInline" ref="searchForm" class="demo-form-inline">
        <el-form-item label="标签名称">
          <el-input placeholder="请输入标签名称" v-model.trim="formInline.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option v-for="item in status" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="delSearchForm">清除</el-button>
          <el-button size="small" type="primary" @click="searchFn">搜索</el-button>
        </el-form-item>
        <!-- 新增目录按钮 -->
       <div class="adduser">
          <!-- @click="addDirectorys" -->
         <el-button
         v-if="$route.query.id"
          icon="el-icon-back"
          type="text"
          @click="$router.back()"
          >返回学科</el-button>
        <el-button
          icon="el-icon-edit"
          size="small"
          type="success"
          @click="addDirectorys"
          >新增标签</el-button
        ></div>
      </el-form>
      <!-- 提示消息 -->
      <el-alert
        class="titleX"
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>
      <!-- 数据列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="180" type="index">
        </el-table-column>
        <el-table-column label="所属学科" width="180" prop="subjectName">
        </el-table-column>
        <el-table-column label="标签名称" width="180" prop="tagName">
        </el-table-column>
        <el-table-column label="创建者" width="180" prop="username">
        </el-table-column>
        <el-table-column label="创建日期" width="220" prop="addDate">
        </el-table-column>
        <!-- :formatter="formatter" -->
        <el-table-column
          label="状态"
          width="180"
          prop="state"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <!-- {{ tableData.state ===  '启用' ? '禁用' : '启用' }} -->
            <el-button type="text" @click="updateState(scope.row)">{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button type="text" @click="updateDirectorys(scope.row)" :disabled="scope.row.state === 1"
              >修改</el-button
            >
            <el-button type="text" @click="delDirectorys(scope.row)" :disabled="scope.row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页符 -->
     <el-row class="row-bg">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="query.pagesize"
        layout="prev,pager,next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
     </el-row>
      <el-dialog
       :title="isEdit?'编辑标签':'新增标签'"
        :visible.sync="dialogVisible"
         width="30%"
         :close-on-click-modal="false"
         :close-on-press-escape="false"
         @close="dialogVisible = false"
         >
        <TagsAdd v-if="dialogVisible" :rowd="row" :isEdit="isEdit" @close="dialogVisible = false" @closeDialog="closeDialog" ></TagsAdd>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>

import {
  list as tagsAPI,
  changeState as changeStateAPI,
  remove as removeAPI
} from '@/api/hmmm/tags.js'

import { parseTime } from '@/utils/index.js'
import TagsAdd from '@/module-hmmm/components/tags-add.vue'
export default {
  name: 'tags',
  components: {
    TagsAdd
  },
  data () {
    return {
      // from表单信息
      formInline: {
        tagName: '',
        state: null
      },
      formInLinetwo: false,
      tableData: [], // 目录列表
      query: {
        page: 1, // 页码数
        pagesize: 10 // 每页条数
      },
      counts: '', // 列表总条数
      total: 0, // 数据总条数
      dialogVisible: false, // 弹框默认显示或隐藏
      status: [{
        id: 1,
        value: '启用'
      },
      {
        id: 0,
        value: '禁用'
      }],
      isEdit: false, // 编辑状态
      row: {}// 要传过去的数据回显
    }
  },
  methods: {
    // 搜索的地方 点击清除
    delSearchForm () {
      this.formInline = {}
      this.getlist()
      this.formInLinetwo = false
    },
    // 点击搜索
    async searchFn () {
      this.query.page = 1
      this.getlist()
      this.formInLinetwo = true
    },
    // 调用目录列表接口
    async getlist () {
      if (this.$route.query.id) {
        const res = await tagsAPI({
          ...this.query,
          subjectID: this.$route.query.id,
          tagName: this.formInline.tagName,
          state: this.formInline.state
        })
        res.data.items.forEach((item) => {
        // 处理时间
          item.addDate = parseTime(item.addDate)
        })
        this.tableData = res.data.items
        this.counts = res.data.counts
        this.total = res.data.counts
      } else {
        const res = await tagsAPI({
          ...this.query,
          tagName: this.formInline.tagName,
          state: this.formInline.state
        })
        res.data.items.forEach((item) => {
        // 处理时间
          item.addDate = parseTime(item.addDate)
        })
        this.tableData = res.data.items
        this.counts = res.data.counts
        this.total = res.data.counts
      }
    },
    async getlistTwo () {
      if (this.$route.query.id) {
        const res = await tagsAPI({
          ...this.query,
          subjectID: this.$route.query.id
        })
        res.data.items.forEach((item) => {
        // 处理时间
          item.addDate = parseTime(item.addDate)
        })
        this.tableData = res.data.items
        this.counts = res.data.counts
        this.total = res.data.counts
      } else {
        const res = await tagsAPI({
          ...this.query
        })
        res.data.items.forEach((item) => {
        // 处理时间
          item.addDate = parseTime(item.addDate)
        })
        this.tableData = res.data.items
        this.counts = res.data.counts
        this.total = res.data.counts
      }
    },
    // 切换状态
    async updateState (row) {
      row.state = row.state === 1 ? 0 : 1
      await changeStateAPI(row)
      this.$message.success('操作成功')
      if (this.formInLinetwo) {
        this.getlist()
      } else {
        this.getlistTwo()
      }
    },
    // 格式化数据   启用禁用
    formatter (row, column, cellValue, index) {
      const res = cellValue === 1 ? '启用' : '禁用'
      return res
    },
    // pageSize 改变时触发 每页条数
    async handleSizeChange (newSize) {
      this.query.pagesize = newSize
      if (this.formInLinetwo) {
        this.getlist()
      } else {
        this.getlistTwo()
      }
    },
    // currentPage改变时触发  当前页
    async handleCurrentChange (newPage) {
      this.query.page = newPage
      if (this.formInLinetwo) {
        this.getlist()
      } else {
        this.getlistTwo()
      }
    },
    // 添加目录  点击按钮 打开弹框
    async addDirectorys () {
      this.dialogVisible = true
      this.isEdit = false
    },
    // 添加成功 关闭弹窗 重新刷新
    closeDialog () {
      this.dialogVisible = false
      this.getlist()
    },
    // 点击编辑 打开弹框
    updateDirectorys (row) {
      this.row = row
      this.isEdit = true
      this.dialogVisible = true
    },
    // 删除 点击删除
    async delDirectorys (row) {
      const delRes = await this.$confirm('此操作将永久删除该目录! 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果点击取消 提示取消删除
      if (delRes === 'cancel') return this.$message('您取消了删除')
      const res = await removeAPI(row)
      if (res.data.success === true) {
        this.$message.success('操作成功，成功删除')
        this.getlist()
      }

      //   如果删除的是当前页的最后一个  那么就跳转到上一页
      if (this.tableData.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
    }

  },
  created () {
    this.getlist()
  }
}
</script>

<style scoped >
.adduser {
  float: right;
}
.titleX {
  margin-bottom: 10px;
}
.box-card {
  margin: 10px 10px 0;
  padding: 3px;
}
.row-bg{
  float: right;
  padding: 15px;
}
</style>
